<template>
  <div class="sixChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'sixChart',
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      var myChart = echarts.init(document.querySelector('.sixChart'))
      var option = {
        legend: {
          top: '90%',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 注意颜色写的位置
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff'
        ],
        series: [
          {
            name: '收入（亿元）',
            type: 'pie',
            // 如果radius是百分比则必须加引号
            radius: ['10%', '70%'],
            center: ['50%', '42%'],
            roseType: 'radius',
            data: [
              { value: 500.5, name: '1月' },
              { value: 364.4, name: '2月' },
              { value: 669.1, name: '3月' },
              { value: 720.9, name: '4月' },
              { value: 771.9, name: '5月' },
              { value: 797, name: '6月' },
              { value: 723.3, name: '7月' },
              { value: 727.4, name: '8月' },
              { value: 824.3, name: '9月' }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 10,
              // 连接到文字的线长度
              length2: 10
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }

}
</script>

<style scoped lang="less">
.sixChart{
    width: 100%;
    height: 100%;
    color: #fff;
}
</style>
